<?php
/**
 * FastApp.
 * 1/21/25
 * @Author deepsea
 * @Contact (telegram:deepsea159)
 */

namespace App\Fastapp\Api\Temp;

class TplMall
{
    public static function vcode(): string
    {
        return <<<EOF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>%s</title>
    <style>
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: "Google Sans", Arial, sans-serif;background: #f8f9fa;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 20px;}
.container {max-width: 600px;width: 100%;margin: 0 auto;background: #f8f9fa;padding: 40px 20px;}
.logo {text-align: center;padding-bottom: 30px;}
.logo img {width: 92px;height: 30px;}
.content {background: #ffffff;border-radius: 8px;box-shadow: 0 1px 2px rgba(0,0,0,0.12);padding: 30px;margin-bottom: 20px;}
h1 {font-size: 24px;color: #202124;margin: 0 0 20px;font-weight: normal;text-align: center;}
.verification-code {text-align: center;margin: 30px 0;padding: 20px;background: #f8f9fa;border-radius: 8px;}
.verification-code .code {font-family: "Courier New", monospace;font-size: 32px;font-weight: bold;color: #202124;letter-spacing: 4px;}
.message {color: #5f6368;font-size: 14px;line-height: 1.5;text-align: center;margin: 20px 0;}
.warning {color: #d93025;font-size: 14px;line-height: 1.5;text-align: center;margin: 20px 0;padding: 10px;background: #fce8e6;border-radius: 4px;}
.footer {text-align: center;color: #5f6368;font-size: 12px;padding: 20px 0;}
.footer p {margin: 10px 0;}
@media (max-width: 480px) {
.container {padding: 20px 10px;}
.content {padding: 20px;}h1 {font-size: 20px;}
.verification-code .code {font-size: 28px;}
}
    </style>
</head>
<body>
    <div class="container">
        <div class="logo"><img src="%s" alt=""></div>
        <div class="content">
            <h1>%s</h1>
            <div class="message">%s</div>
            <div class="verification-code"><div class="code">%s</div></div>
            <div class="message">%s</div>
            <div class="warning">%s</div>
        </div>
        <div class="footer">%s</div>
    </div>
</body>
</html>
EOF;

    }

    public static function login(): string
    {
        return <<<EOF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>%s</title>
    <style>
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Google Sans', Arial, sans-serif;background: #f8f9fa;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 20px;}
.container {max-width: 600px;width: 100%;margin: 0 auto;background: #f8f9fa;padding: 40px 20px;}
.logo {text-align: center;padding-bottom: 30px;}
.logo img {width: 92px;height: 30px;}
.content {background: #ffffff;border-radius: 8px;box-shadow: 0 1px 2px rgba(0,0,0,0.12);padding: 30px;margin-bottom: 20px;}
h1 {font-size: 24px;color: #202124;margin: 0 0 20px;font-weight: normal;text-align: center;}
.user-info {text-align: center;margin: 20px 0;}
.user-info span {color: #202124;margin-left: 5px;}
.message {color: #5f6368;font-size: 14px;line-height: 1.5;text-align: center;margin: 20px 0;}
.action-button {text-align: center;margin: 30px 0;}
.action-button a {display: inline-block;background: #1a73e8;color: #ffffff;text-decoration: none;padding: 10px 24px;border-radius: 4px;font-weight: 500;transition: background-color 0.2s;}
.action-button a:hover {background: #1557b0;}
.link-info {color: #5f6368;font-size: 14px;text-align: center;}
.link-info a {color: #1a73e8;text-decoration: none;}
.link-info a:hover {text-decoration: underline;}
.footer {text-align: center;color: #5f6368;font-size: 12px;padding: 20px 0;}
.footer p {margin: 10px 0;}
@media (max-width: 480px) {
.container {padding: 20px 10px;}
.content {padding: 20px;}
h1 {font-size: 20px;}
}
    </style>
</head>
<body>
    <div class="container">
        <div class="logo"><img src="%s" alt="Google"></div>
        <div class="content">
            <h1>%s</h1>
            <div class="user-info"><span>%s</span></div>
            <div class="message">%s</div>
            <div class="action-button">%s</div>
            <div class="link-info">%s</div>
        </div>
        <div class="footer">%s</div>
    </div>
</body>
</html> 
EOF;
    }
}